<template>
    <div class="information">
        <breadcrumb :routes="routes"></breadcrumb>
        <div class="infor-warper">
            <div class="dev-width">
                <div class="infor-left">
                    <div class="infor-banner">
                        <Carousel v-model="selectedCarousel" :height="320" loop :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots" :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow">
                            <CarouselItem v-for="(item,index) in bannerList" :key="index">
                                <div>
                                    <img :src="item.thumbnail">
                                    <div class="pop-layer"></div>
                                    <span>{{item.title}}</span>
                                </div>
                            </CarouselItem>
                        </Carousel>
                    </div>

                </div>
                <div class="infor-right">
                    <ul class="infor-box">
                        <li v-for="(item,index) in topNews" :key="index">
                            <nuxt-link :to="{path:`/news/${item.id}`}">
                                {{item.title}}
                                <h4>{{item.description}}</h4>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="dev-width">
                <ul>
                    <li v-for="(information,index1) in informations" :key="index1" class="informations">
                        <div class="mini-list" v-if="information!==null">
                            <div class="infor-title">
                                <span>{{information.categoryName}}</span>
                                <nuxt-link :to="{path:'/news/catagory',query:{id:information.categoryId,name:information.categoryName}}">
                                    更多&nbsp;&gt;&gt;
                                </nuxt-link>
                            </div>
                            <ul class="infor-list">
                                <li v-for="(item,index) in information.infoDtoList" :key="index">
                                    <b></b>
                                    <nuxt-link :to="{path:`/news/${item.id}`}">{{item.title}}
                                    </nuxt-link>
                                    <i>{{item.updateTime | formatDate('yyyy-MM-dd')}}</i>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="report-down">

            </div>
        </div>
    </div>
</template>
<script>
import portal from "~/net/portal";
import breadcrumb from '~/components/Breadcrumb'

export default {
    name: "news",
    data() {
        return {
            routes: [
                { name: '首页', path: '/' },
                { name: '资讯' }
            ],
            selectedCarousel: 0,
            setting: {
                autoplay: true,
                autoplaySpeed: 2000,
                dots: "inside",
                radiusDot: true,
                trigger: "hover",
                arrow: "never"
            }
        }
    },
    components: {
        breadcrumb
    },
    async asyncData(context) {
        let [resp1, resp2] = await Promise.all([
            portal.getTopInformation({
                query: { num: 5 },
                client: context.req
            }),
            portal.getTopTypeInformation({
                query: {
                    typeNum: 4,
                    infoNum: 5,
                },
                client: context.req
            })]);
        let data1 = resp1.data;
        let bannerData = data1.length > 3 ? data1.slice(0, 3) : data1;
        let data2 = resp2.data;
        return {
            topNews: data1,
            bannerList: bannerData,
            informations: data2
        }
    }
}
</script>
<style>
@import "~/assets/styles/news.css";
</style>
